<template>
  <div id="ActivityTable">
    <el-table
      :data="ticketData" border style="width: 100%" empty-text="暂无奖券数据"
    >
      <el-table-column
        prop="name"
        label="券名称">
      </el-table-column>
      <el-table-column
        label="类型">
        <template slot-scope="scope">
          {{scope.row.type | handleTypeENum}}
        </template>
      </el-table-column>
      <el-table-column
        prop="ticketDesc"
        label="描述">
      </el-table-column>
      <el-table-column
        prop="count"
        label="发放量">
      </el-table-column>
      <el-table-column
        prop="lastcount"
        label="已领取">
      </el-table-column>
      <el-table-column
        prop="lastcount"
        label="已使用">
      </el-table-column>
      <el-table-column
        label="有效期">
        <template slot-scope="scope">
          <span>{{scope.row.begintime}} - {{scope.row.endtime}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <!--<el-button type="text" size="small">编辑</el-button>-->
          <el-button
            type="text" size="small" style="color: #dd6161"
            @click="() => { beHandlingRow = scope.row; delDiaVis = true }"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="提示"
      :visible.sync="delDiaVis"
      width="30%"
    >
      <span>确认删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDiaVis = false">取 消</el-button>
        <el-button
          type="primary"
          @click="delDiaOk"
          :loading="isDeleting"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import API from '@/config/api.js'
import ErrorConfig from '@/config/error.config.js'
export default {
  name: 'ActivityTable',
  props: [
    'ticketData'
  ],
  data () {
    return {
      beHandlingRow: null,
      delDiaVis: false,
      isDeleting: false
    }
  },
  components: {
  },
  filters: {
    handleTypeENum: value => {
      switch (value) {
        case 1:
          return '代金券/折扣券'
        case 2:
          return '活动券'
        default:
          return ''
      }
    }
  },
  methods: {
    async delDiaOk () {
      this.isDeleting = true
      const { id } = this.beHandlingRow
      const response = await API.deleteTicket({ id })
      this.isDeleting = false
      const { code } = response
      if (code === 1) {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.delDiaVis = false
        this.$emit('reloadPage')
      } else {
        if (code === -1) {
          const { msg } = response
          this.$message.error(msg)
        } else {
          this.$message.error(ErrorConfig[code])
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
  #ActivityTable {
  }
</style>
